<template>
    <div class="wrapper ui item flex flex-column flex-1" style="height: 100%">
        <home-header></home-header>
        <div class="logo pt40 auto-center">
            <img src="../../assets/img/login-logo.png" alt="">
            <span class="bold block text-center" style="font-size: 20px">平台账号登录</span>
        </div>
        <div class="item flex-1 ui flex col-center row-center">
            <div class="login-from">
                <div class="w-100p relative">
                    <van-icon name="contact" />
                    <input type="text" class="login-input" placeholder="请输入用户名" v-model="form.username">
                </div>
                <div class="w-100p mt30 relative">
                    <van-icon name="password-not-view" />
                    <input type="password" class="login-input" placeholder="请输入密码" v-model="form.password">
                </div>
                <!--
                <div class="w-100p m-t-30 pos-r ui flex row-between c-gray">
                    <label><input type="checkbox" style="width: 14px;height: 14px;">保持登录</label>
                    <a href="javascript:">忘记密码？</a>
                </div>
                -->
                <a href="javascript:" class="login-btn mt30 text-center" @click="login">登录</a>
            </div>
        </div>
    </div>
</template>
<script>
    import HomeHeader from '../../components/header'

    export default {
        name: 'login',
        components: {
            HomeHeader
        },
        data() {
            return {
                // 是否在登录：true-是；false-否
                loginLoading: false,
                // 表单数据
                form: {
                    // 账号
                    username: '',
                    // 密码
                    password: ''
                },
            };
        },
        methods: {
            login() {
                if (this.loginLoading) {
                    return;
                }

                if (!this.form.username) {
                    this.$toast('请输入账号');

                    return;
                }

                if (!this.form.password) {
                    this.$toast('请输入密码');

                    return;
                }

                this.loginLoading = true;

                this.$http.post('/mobile/remoteLogin/login', {
                    username: this.form.username,
                    password: this.form.password
                }).then(({data}) => {
                    if (data.code == 1 && data.content && data.content.length) {
                        let userData = data.content[0];

                        localStorage.setItem('username', this.form.username);
                        localStorage.setItem('password', this.form.password);
                        // 登录用户的信息
                        this.$userSave(userData);
                        // 已登录
                        localStorage.setItem('isLogin', '1');

                        // 重定向到被拦截的 url
                        let redirectUrl = localStorage.getItem('redirectUrl');
                        let redirectQuery = localStorage.getItem('redirectQuery');
                        this.$router.replace({
                            path: redirectUrl ? redirectUrl : '/',
                            query: redirectQuery ? JSON.parse(redirectQuery) : {}
                        });
                    } else {
                        localStorage.removeItem('username');
                        localStorage.removeItem('password');
                        localStorage.removeItem('user');
                        localStorage.removeItem('isLogin');

                        this.$toast('用户名或密码错误');
                    }

                    this.loginLoading = false;
                }).catch(() => {
                    localStorage.removeItem('username');
                    localStorage.removeItem('password');
                    localStorage.removeItem('user');
                    localStorage.removeItem('isLogin');

                    this.$toast('登录超时，请重新尝试！');

                    this.loginLoading = false;
                })
            }
        }
    }
</script>
<style lang="scss">
    @import '../../assets/css/varible';

    .wrapper .swiper-pagination-bullet-active {
        background: #fff !important;
        height: calc(100% - 44px);
    }

    ::-webkit-input-placeholder {
        color: $gray-color;
    }

    .login-from {
        width: 80%;
        height: auto;
        a, label {
            color: $gray-color;
            font-size: 18px
        }
        i {
            position: absolute;
            left: 14px;
            bottom: 13px;
            font-size: 18px;
            color: $gray-color;
        }
        input.login-input {
            width: 100%;
            display: block;
            padding-left: 40px;
            height: 45px;
            line-height: 45px;
            border-radius: 23px;
            font-size: 16px;
            outline: none;
            border: 1px solid $border-color;
        }
        .login-btn {
            display: block;
            background: $bg-blue;
            color: #fff;
            border-radius: 23px;
            height: 45px;
            line-height: 45px;
            font-size: 16px;
        }
    }
</style>
